<template>
  <div class="container">
    <input v-model="username" placeholder="用户名-input username" class="input" />
    <input v-model="password" placeholder="密码" type="password" class="input" />
    <div class="button-group">
      <button @click="addData" class="button">新增-add</button>
      <button @click="queryData" class="button">查询-query</button>
    </div>
  </div>
</template>

<script setup>
const username = ref('')
const password = ref('')
const { $trpc } = useNuxtApp()
const handleClick = async () => {

}
const addData = async () => {
  // 方法实现由用户自行编写
}
const queryData = async () => {
  const res = await $trpc.sysRouter.byTest.query()
  console.log(res)
}
</script>

<style scoped>
.container {
  max-width: 400px;
  margin: 50px auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.input {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

.button-group {
  display: flex;
  justify-content: space-between;
}

.button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  flex: 0 0 48%;
}

.button:hover {
  opacity: 0.9;
}
</style>